<template>
    <div>
        <nav-bar></nav-bar>
        <div >
            <van-tree-select @click-nav="onNavClick"  height="100%" :items="items" :main-active-index.sync="fl">
            <template  #content>
                <div  class="large">

                        <router-link v-for="(item,i) in games" :key="i" :id="item.gid"  :to="`/details?id=${item.gid}`">
                            <div  v-if="fl === 0" class="fd1" >
                                <div style="border:1px solid black">
                                    <van-image
                                    width="130"
                                    height="80"
                                    fit="contain"
                                    :src="`${item.gimg}`"
                                    />
                                    <div class="pri">
                                        {{item.gprice}}
                                    </div>
                                    <div class="fd1x1">
                                        {{item.gname}}
                                    </div>
                                    <div class="fd1x2">
                                        {{item.gtag}}
                                    </div>
                                </div>
                            </div>
                        </router-link>

            <router-link v-for="(item,i) in game" :key="i+'w'"   :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 1" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
            <router-link v-for="(item,i) in game" :key="i+'q'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 2" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'e'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 3" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
            <router-link v-for="(item,i) in game" :key="i+'r'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 4" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'t'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 5" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'y'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 6" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'u'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 7" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'i'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 8" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'o'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 9" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'p'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 10" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'a'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 11" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'s'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 12" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'d'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 13" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'f'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 14" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'g'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 15" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'h'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 16" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'j'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 17" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'k'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 18" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'l'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 19" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'z'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 20" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'x'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 21" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'c'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 22" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                <router-link v-for="(item,i) in game" :key="i+'v'" :to="`/details?id=${item.gid}`" >
                <div v-if="fl === 23" class="fd1" >
                    <div style="border:1px solid black">
                <van-image
                width="130"
                height="80"
                fit="contain"
                :src="`${item.gimg}`"
                />
                <div class="pri">
                    {{item.gprice}}
                </div>
                <div class="fd1x1">
                    {{item.gname}}
                </div>
                <div class="fd1x2">
                    {{item.gtag}}
                </div>
                </div>
                </div>
                </router-link>
                </div>
                
  </template>
</van-tree-select>
        </div>
       <van-tabbar  v-model="active" fixed placeholder>
        <van-tabbar-item to="/" name="home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item  name="find" icon="search" dot>分类</van-tabbar-item>
        <van-tabbar-item to="/com" name="com" icon="friends-o" badge="5">社区</van-tabbar-item>
        <van-tabbar-item to="/me" name="me" icon="manager-o">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import NavBar from '../components/db.vue'

export default {
    name:'home',
    components:{
        NavBar
    },
    data() {
        return {   
            message:'',         
            fl:0,
            active:'find',
            items:[{ text: '全部' }, { text: '开放世界生存制作' },{ text: '沙盒' },{ text: '生存' },{ text: '僵尸' },{ text: '动作' },{ text: '在线合作' },{ text: '大逃杀' },{ text: '多人' },{ text: '武术' },{ text: '策略' },{ text: '回合战略' },{ text: '历史' },{ text: '射击' },{ text: '独立' },{ text: '恐怖' },{ text: '解密' },{ text: '太空' },{ text: '科幻' },{ text: '竞速' },{ text: '驾驶' },{ text: '塔防' },{ text: '唯美' },{ text: '类银河战士恶魔城' }],
            games:'',
            game:[],
            tag:''
        }
    },
    methods:{
            onNavClick(index){
        let top = document.documentElement.scrollTop || document.body.scrollTop;
      
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
                let sj=[]
                this.game=[]
                // console.log(this.games[0]);
                  this.axios.get('/game').then((result)=>{
    // console.log(result.data.results[0]);
         let text=this.items[index].text;
        
            for (let i = 0; i < this.games.length; i++) {
                
        const element = this.games[i];
        
        this.tag=element.gtag.split('，')
        // console.log(this.tag);
        for (let j = 0; j < 3; j++) {
            const element1 = this.tag[j];
            // console.log(element1
            if(text==element1){
                sj=result.data.results[i]
                this.game.push(sj)
                
            }          
        }    
    }
 })

    }  
    
    },

    mounted(){
        let id=this.$route.query.id
    this.fl=parseInt(id)
    console.log(this.fl);
  this.axios.get('/game').then((result)=>{
    // console.log(result.data.results);
    if(this.fl==0){
    this.games=result.data.results;}else{
        this.games=result.data.results;
        console.log(1);
    console.log(this.items[this.fl].text);
    this.axios.get(`/fl?tag=${this.items[this.fl].text}`).then(result=>{
        console.log(result);
        this.game=result.data.results
    })
    }
    


  })

  
},

}
</script>
<style scoped>
.fd1{
    background-color: #1b2838;
    color: #9099a1;
    
}
.fd1x1{
    text-align: center;
    
}
.fd1x2{
   text-align: center;
}
.pri{
    font-weight: 400;
    float: right;
    font-size: 0.5rem;
    

    margin-top: 0.6rem; 
}

 .van-tree-select__nav{
    background-color: #1b2838;
}
.van-sidebar-item{
   background-color: #1b2838; 
   color: white;
}
/deep/ .van-tabbar{
  background-color: rgb(23, 26, 33);
}
.van-tabbar-item--active{
    background-color: rgb(23, 26, 33);
}
 .van-tree-select__nav{
    background-color: #171A21;
}
.van-sidebar-item{
    background-color: #171A21;
}
.van-tree-select__content{
    background-color: #1b2838;
}
.large{
    width: 100%;
    height:9.5rem;
    background-color: #1b2838;
}
</style>